
import React from "react";
import { useEffect } from "react";
import { useContext } from "react";
import { useState } from "react";
import Flexbox from "./flexBox";
const ReuniteBox = ({ area, style = { width: "100%" }, data1, data2 }) => {
    const [current, setCurrent] = useState(0);
    const [state, setState] = useState(data1)

    // 切换了current的时候，数据也要切换下
    useEffect(() => {
        setState()
        switch (current) {
            case 0: setState(data1); break;
            case 1: setState(data2); break;
            default: return;
        }
    }, [current, data1, data2])


    return (
        <>
            <div className="check-container" style={style}>
                <div className="checkbox" >
                    <div className="box-header">
                        <div className="box-title">
                            <span className="text">客户量统计</span>
                        </div>
                        <div className="switchBtn">
                            <span className={current === 0 ? "btn active" : "btn"} onClick={() => { setCurrent(0) }}>年</span>
                            <span className={current === 1 ? "btn active" : "btn"} onClick={() => { setCurrent(1) }}>月</span>
                        </div>
                    </div>
                    <div className="box-container">
                        <Flexbox area={area} showTitle={false} showPie={false} showBar={false} showLegend={true} title="历年客户量（年）" useXis={true} style={{ width: "100%" }} state={state} defaultModule={"adBar"} />
                    </div>
                </div>
            </div>
        </>
    )
}
export default ReuniteBox;